<template>
  <div class="message">
    <el-breadcrumb separator="/" style="margin-bottom: 10px">
      <el-breadcrumb-item
        ><el-icon><House /></el-icon
      ></el-breadcrumb-item>
      <el-breadcrumb-item>岗位信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <div class="left-box">
        <div
          class="left-title"
          style="display: flex; justify-content: space-between"
        >
          <div style="padding: 10px 10px; display: flex">
            <div style="padding-top: 2px; margin-right: 5px">
              <el-icon><Menu /></el-icon>
            </div>
            <div style="font-weight: 550">岗位类型</div>
          </div>
          <!-- <div>
            <el-button
              style="font-size: 23px"
              type="primary"
              link
              :icon="Edit"
            />
          </div> -->
        </div>
        <div style="margin-top: 10px; margin-left: 10px; margin-right: 10px">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <template #default="{ node }">
              <span class="tree-text" v-if="node.label.length <= 15">
                {{ node.label }}</span
              >
              <el-tooltip
                v-else
                effect="dark"
                :content="node.label"
                placement="top"
              >
                <span class="tree-text"> {{ node.label }}</span>
              </el-tooltip>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="right-box">
        <div class="right-title">
          <div class="title-top">
            <div style="display: flex; width: 300px">
              <div
                style="line-height: 28px; margin-right: 5px; font-weight: 550"
              >
                岗位名称:
              </div>
              <el-input
                v-model="queryParams.jobName"
                style="width: 170px"
                placeholder="请输入岗位名称"
              ></el-input>
            </div>
            <div style="display: flex; width: 300px">
              <div
                style="line-height: 28px; margin-right: 5px; font-weight: 550"
              >
                公司名称:
              </div>
              <el-input
                v-model="queryParams.companyName"
                style="width: 170px"
                placeholder="请输入公司名称"
              ></el-input>
            </div>
            <div style="display: flex; width: 500px">
              <div
                style="line-height: 28px; margin-right: 5px; font-weight: 550"
              >
                城市:
              </div>
              <el-select
                v-model="province"
                placeholder="请选择省份"
                style="width: 120px; margin-right: 20px"
                @change="getCityList(province)"
              >
                <el-option
                  v-for="item in provinceData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
              <el-select
                :disabled="!province"
                clearable
                v-model="cityCode"
                placeholder="请选择城市"
                style="width: 150px"
              >
                <el-option
                  v-for="item in cityData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </div>
          </div>
          <div class="title-bottom">
            <div style="display: flex; width: 420px">
              <div
                style="line-height: 28px; margin-right: 5px; font-weight: 550"
              >
                薪资范围:
              </div>
              <el-input
                v-model="queryParams.salaryStart"
                placeholder="请输入薪资起点"
                style="width: 130px"
              ></el-input>
              <div style="margin: 0 10px">-</div>
              <el-input
                v-model="queryParams.salaryEnd"
                placeholder="请输入薪资终点"
                style="width: 130px"
              ></el-input>
            </div>
            <div style="display: flex">
              <el-button @click="getTableData()" type="primary" :icon="Search"
                >搜索</el-button
              >
              <el-button @click="reset()" :icon="RefreshRight">重置</el-button>
            </div>
          </div>
        </div>
        <div class="right-content">
          <div
            style="
              display: flex;
              justify-content: space-between;
              border-bottom: 1.5px solid rgb(189, 191, 190);
              padding-bottom: 10px;
            "
          >
            <div style="display: flex">
              <el-button type="primary" :icon="Plus" @click="addData()"
                >新增</el-button
              >
              <el-button
                type="danger"
                :icon="DeleteFilled"
                @click="batchDelete()"
                >删除</el-button
              >
              <el-button type="success" :icon="Download" @click="enter()"
                >导入</el-button
              >
              <!-- <el-button type="warning" :icon="Upload">导出</el-button> -->
            </div>
            <div style="display: flex">
              <div class="totality">
                岗位总数: <span>{{ statisticsData.jobCount }}</span
                >&nbsp&nbsp(个)
              </div>
              <div class="totality">
                需求城市:<span>{{ statisticsData.cityCount }}</span
                >&nbsp&nbsp(个)
              </div>
              <div class="totality">
                薪资范围:
                <span
                  >{{ statisticsData.salaryStart }}-{{
                    statisticsData.salaryEnd
                  }}</span
                >
              </div>
            </div>
          </div>
          <div style="padding: 20px 0">
            <el-table
              border
              :data="tableData"
              style="width: 100%"
              height="350px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="序号" type="index" width="80" />
              <el-table-column property="jobName" label="岗位名称" />
              <el-table-column label="专业/行业">
                <template #default="scope"
                  >{{ scope.row.majorName }}
                  {{ scope.row.industryName }}</template
                >
              </el-table-column>
              <el-table-column
                property="companyName"
                label="公司名称"
                show-overflow-tooltip
              />
              <el-table-column label="城市">
                <template #default="scope">{{
                  scope.row.basicCity.name
                }}</template>
              </el-table-column>
              <el-table-column
                property="address"
                show-overflow-tooltip
                label="薪资范围"
              >
                <template #default="scope"
                  >{{ scope.row.salaryStart }} -
                  {{ scope.row.salaryEnd }}</template
                >
              </el-table-column>
              <el-table-column property="address" label="操作">
                <template #default="scope">
                  <div style="display: flex">
                    <el-button @click="editData(scope.row)" type="primary" link>
                      编辑
                    </el-button>
                    <div style="margin: 0 10px; color: rgb(218, 218, 218)">
                      |
                    </div>
                    <el-popconfirm
                      title="你确定要删除这条岗位信息吗?"
                      @confirm="confirmEvent(scope.row)"
                      @cancel="cancelEvent"
                    >
                      <template #reference>
                        <el-button type="primary" link> 删除 </el-button>
                      </template>
                    </el-popconfirm>
                    <!-- <div style="margin: 0 10px; color: rgb(218, 218, 218)">
                      |
                    </div> -->
                    <!-- <el-button type="primary" link> 详情 </el-button> -->
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                background
                v-show="total > 0"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                v-model:page="queryParams.currentPage"
                v-model:limit="queryParams.pageSize"
                class="pagination_bom"
              />
              <!-- @pagination="getList"   -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增/添加表格数据弹窗 -->
    <el-dialog center v-model="addDialog" :title="addTitle" width="600">
      <el-form :model="form" label-width="80px">
        <el-form-item label="公司名称 :" prop="courseNo">
          <el-input
            v-model="form.companyName"
            placeholder="请输入公司名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="行业名称 :" prop="courseNo">
          <el-input
            v-model="form.industryName"
            placeholder="请输入行业名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="起始薪资 :" prop="courseNo">
          <el-input
            placeholder="请输入薪资起点"
            style="width: 217px"
            v-model="form.salaryStart"
          ></el-input>
          <div style="width: 52px; text-align: center">--</div>
          <el-input
            placeholder="请输入薪资终点"
            style="width: 217px"
            v-model="form.salaryEnd"
          ></el-input>
        </el-form-item>
        <el-form-item label="城市 :" prop="courseNo">
          <el-select
            v-model="addProvince"
            placeholder="请选择省份"
            style="width: 233px; margin-right: 20px"
            @change="getCityList(addProvince)"
          >
            <el-option
              v-for="item in provinceData"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
          <el-select
            :disabled="!addProvince"
            clearable
            v-model="addCityCode"
            placeholder="请选择城市"
            style="width: 233px"
          >
            <el-option
              v-for="item in cityData"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="信息来源  :" prop="courseNo">
          <el-input
            v-model="form.infoSources"
            placeholder="请输入信息来源"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-foot">
        <el-button
          v-if="addTitle == '新增岗位信息'"
          type="primary"
          class="foot-button"
          @click="verifyAddData()"
          :disabled="clicked"
          >确认</el-button
        ><el-button
          v-else
          @click="verifyEditData()"
          type="primary"
          class="foot-button"
          :disabled="editClicked"
          >确认</el-button
        >
        <el-button
          @click="addDialog = false"
          type="primary"
          class="foot-button"
          plain
          >取消</el-button
        >
      </div>
    </el-dialog>
    <!-- 导入弹框 -->
    <el-dialog
      @close="closeDialog()"
      center
      v-model="enterDialog"
      title="导入文件"
      width="800"
    >
      <div style="padding: 40px 40px 0 40px">
        <div style="display: flex; width: 100%; border: 1px solid #e9e9e9">
          <div style="background: #f5f5f5; padding: 20px 15px">
            <img
              style="width: 80px"
              src="../../assets/enter/download.png"
              alt=""
            />
          </div>
          <div style="border-left: 1px solid #e9e9e9; padding: 20px">
            <div style="font-size: 18px; margin-bottom: 5px">
              填写导入岗位信息
            </div>
            <div style="font-size: 14px; margin-bottom: 10px">
              请按照数据模板的格式准备导入数据
            </div>
            <div>
              <el-button type="primary"
                ><a href="http://8.137.179.57:9000/yib/岗位信息导入.xlsx"
                  >下载模板</a
                ></el-button
              >
            </div>
          </div>
        </div>
        <div style="height: 40px"></div>
        <div style="display: flex; width: 100%; border: 1px solid #e9e9e9">
          <div style="background: #f5f5f5; padding: 30px 15px 15px 15px">
            <img
              style="width: 80px"
              src="../../assets/enter/uploading.png"
              alt=""
            />
          </div>
          <div style="border-left: 1px solid #e9e9e9; padding: 20px">
            <div style="font-size: 18px; margin-bottom: 5px">
              上传岗位信息表
            </div>
            <div style="font-size: 14px; margin-bottom: 10px">
              文件后缀名必须喂xls或xlsx(即Excel),文件大小不得大于10M
            </div>
            <div>
              <!-- :before-upload="beforeUpload" -->
              <!-- action="http://192.168.1.207:8081/excel/importJobInfo" -->
              <el-upload
                class="upload-demo"
                :action="action"
                :on-change="handleChange"
                :file-list="fileList"
                :headers="myHeaders"
              >
                <div>
                  <el-button type="primary">上传文件</el-button>
                </div>
              </el-upload>
            </div>
          </div>
        </div>
      </div>

      <div class="dialog-foot">
        <el-button @click="closeDialog()" type="primary" class="foot-button"
          >完成</el-button
        >
        <el-button
          @click="closeDialog()"
          type="primary"
          class="foot-button"
          plain
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="Message">
import {
  House,
  Expand,
  Edit,
  Share,
  Search,
  RefreshRight,
  Menu,
  Plus,
  DeleteFilled,
  Download,
  Upload,
  Close,
} from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref } from "vue";
import {
  getTree,
  getProvince,
  getCity,
  getTable,
  deleteTable,
  effect,
  deleteTableAll,
  verifyAdd,
  edit,
  verifyEdit,
} from "@/api/message";
import { ElMessage } from "element-plus";
import axios from "axios";
import { baseApi, devApi } from "../../../base_path.json";

const defaultProps = reactive({
  children: "child",
  label: "name",
});
const myHeaders = ref({
  Token: localStorage.getItem("Token"),
});
const action = ref(baseApi + "/excel/importJobInfo");
const treeData = ref([]);
const treeId = ref({
  jobId: 0,
  majorId: 0,
});

const fileList = ref();

const province = ref("");
const addProvince = ref("");
const addCityCode = ref("");
const cityCode = ref("");

const provinceData = ref([]); //省级城市
const cityData = ref([]); //市级城市

const clicked = ref(false); // 确认按钮防抖参数
const editClicked = ref(false); // 编辑确认按钮防抖参数

const form = ref({
  token: localStorage.getItem("Token"),
  companyName: "",
  industryName: "",
  infoSources: "",
  jobId: "",
  majorId: "",
  cityCode: "",
  salaryStart: "",
  salaryEnd: "",
});

const queryParams = ref({
  token: localStorage.getItem("Token"),
  companyName: "",
  majorId: "",
  jobId: "",
  cityCode: "",
  salaryStart: "",
  salaryEnd: "",
  currentPage: 1,
  pageSize: 10,
});

const total = ref(1);

const tableData = ref([]);
const statisticsData = ref({});
const ids = ref([]);

const enterDialog = ref(false);

const addTitle = ref("");
const addDialog = ref(false);

const code = ref(0);

const fileName = ref(null); // 上传文件的名字

// 获取专业树数据
async function getTreeList() {
  const token = localStorage.getItem("Token");
  const res = await getTree({
    token,
  });
  treeData.value = res;
}
// 专业树点击
function handleNodeClick(data) {
  if (data.parentId == 0) {
    form.value.majorId = data.id;
    queryParams.value.majorId = data.id;
    form.value.jobId = data.parentId;
    queryParams.value.jobId = data.parentId;
  } else {
    form.value.majorId = data.parentId;
    queryParams.value.majorId = data.parentId;
    form.value.jobId = data.id;
    queryParams.value.jobId = data.id;
  }
  getTableData();
}

// 获取省级城市名称
async function getProvinceList() {
  const res = await getProvince();
  provinceData.value = res;
}
// 获取市级城市
async function getCityList(code) {
  if (addTitle.value !== "修改岗位信息") {
    cityCode.value = "";
    addCityCode.value = "";
  }
  const res = await getCity(code);
  cityData.value = res;
}

// 获取表格数据
async function getTableData() {
  if (!cityCode.value) {
    queryParams.value.cityCode = province.value;
    const prom = queryParams.value;
    const res = await getTable(prom);
    tableData.value = res.rows;
    total.value = res.total;
    statisticsData.value = res;
  } else {
    queryParams.value.cityCode = cityCode.value;
    const prom = queryParams.value;
    const res = await getTable(prom);
    tableData.value = res.rows;
    total.value = res.total;
    statisticsData.value = res;
  }
}

// 表格选取
function handleSelectionChange(val) {
  ids.value = val.map((item) => item.id);
}

// 重置按钮操作
function reset() {
  province.value = "";
  cityCode.value = "";
  queryParams.value = {
    token: localStorage.getItem("Token"),
    companyName: "",
    majorId: "",
    jobId: "",
    cityCode: "",
    salaryStart: "",
    salaryEnd: "",
    currentPage: 1,
    pageSize: 10,
  };
  getTableData();
}

// 新增按钮操作
function addData() {
  form.value.companyName = "";
  form.value.industryName = "";
  form.value.salaryStart = "";
  form.value.salaryEnd = "";
  form.value.cityCode = "";
  form.value.infoSources = "";
  addProvince.value = "";
  addCityCode.value = "";
  if (!form.value.majorId) {
    ElMessage({
      message: "请选择专业",
      type: "warning",
    });
    return;
  }
  if (!form.value.jobId) {
    ElMessage({
      message: "请选择岗位",
      type: "warning",
    });
    return;
  }
  addDialog.value = true;
  addTitle.value = "新增岗位信息";
}

// 新增确认按钮
async function verifyAddData() {
  if (clicked.value) return;
  clicked.value = true;
  setTimeout(() => {
    clicked.value = false;
  }, 3000);
  if (!addCityCode.value) {
    form.value.cityCode = addProvince.value;
  } else {
    form.value.cityCode = addCityCode.value;
  }
  const res = await verifyAdd(form.value);
  if (res.code == 0) {
    ElMessage({
      message: "新增成功",
      type: "success",
    });
    addDialog.value = false;
    getTableData();
  }
}

// 导入按钮操作
function enter() {
  enterDialog.value = true;
}

// 批量删除按钮
async function batchDelete() {
  if (ids.value.length == 0) {
    ElMessage({
      message: "请选择删除的数据并勾选",
      type: "warning",
    });
  } else {
    const res = await deleteTableAll(ids.value);
    if (res.code == 0) {
      ElMessage({
        message: "批量删除成功",
        type: "success",
      });
    }
    getTableData();
  }
}

// 表格内删除按钮
async function confirmEvent(row) {
  const res = await deleteTable(row.id);
  if (res.code == 0) {
    reset();
    getTableData();
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  }
}

// 表格内编辑按钮
async function editData(row) {
  addTitle.value = "修改岗位信息";
  addDialog.value = true;
  const res = await edit(row.id);
  if (res.cityCode !== "") {
    addCityCode.value = res.cityCode;
  }
  form.value = res;
  addProvince.value = res.cityPCode;
  getCityList(res.cityPCode);
}

// 编辑确认按钮
async function verifyEditData() {
  if (editClicked.value) return;
  editClicked.value = true;
  setTimeout(() => {
    editClicked.value = false;
  }, 3000);

  if (!addCityCode.value) {
    form.value.cityCode = addProvince.value;
  } else {
    form.value.cityCode = addCityCode.value;
  }
  const res = await verifyEdit(form.value);
  if (res.code == 0) {
    ElMessage({
      message: "修改成功",
      type: "success",
    });
  } else {
    ElMessage({
      message: res.msg,
      type: "error",
    });
  }
  addDialog.value = false;
  getTableData();
}

function cancelEvent() {
  console.log("取消删除");
}

function handleChange() {}

// 关闭时导入弹窗回调
function closeDialog() {
  fileList.value = "";
  enterDialog.value = false;
}

onMounted(() => {
  getTreeList();
  getProvinceList();
  getTableData();
});
</script>

<style lang="scss" scoped>
.message {
  height: calc(100vh - 145px);

  .tree-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    width: 100%;
  }
}

.content {
  background: #fff;
  // height: calc(100% - 20px);
  height: 100%;
  // min-height: 1500px;
  display: flex;
  border-top: 1px solid rgb(189, 191, 190);
  border-right: 1px solid rgb(189, 191, 190);
}

.left-box {
  width: 230px;
  border-right: 1px solid rgb(189, 191, 190);
  border-left: 1px solid rgb(189, 191, 190);
  margin-right: 20px;

  .left-title {
    border-bottom: 1px solid rgb(189, 191, 190);
    width: 100%;
  }
}

.right-box {
  // width: calc(100% - 363px);
  width: 100%;

  .right-title {
    border-left: 1px solid rgb(189, 191, 190);
    border-bottom: 1px solid rgb(189, 191, 190);
    padding: 20px;
    width: 100%;
    margin-bottom: 10px;

    .title-top {
      display: flex;
      margin-bottom: 30px;
    }

    .title-bottom {
      display: flex;
    }
  }

  .right-content {
    border-top: 1px solid rgb(189, 191, 190);
    border-left: 1px solid rgb(189, 191, 190);
    padding: 20px;
    // height: calc(100vh - 333px);
    width: 100%;
    height: calc(100% - 145px);

    .totality {
      width: 190px;
      padding: 5px 10px;
      color: rgb(31, 158, 248);
      border: 1px solid rgb(189, 191, 190);
    }
  }
}

.dialog-foot {
  width: 100%;
  text-align: center;
  padding: 20px 0;

  .foot-button {
    width: 120px;
    height: 35px;
  }
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

a {
  color: #fff;
}

:deep(.el-tree-node__content) {
  height: 40px;
}
</style>
